<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/top.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="12%">
            <top @getuser="user">
            </top>
        </el-header>
        <el-main>
            <div class="c900 h100" style="overflow-y: auto; background-color: #fff">
                <div style="padding-inline: 20px; margin-bottom: 20px">
                    <span style="font-size: 20px;margin-right: 100px">{{paper.title}}</span>
                    总分：<span style="font-size: 15px;margin-right: 100px">{{paper.scoreTotal}}</span>
                    考试时间：<span style="font-size: 15px;margin-right: 43%">{{paper.time}}分钟</span>
                    <el-button type="primary" @click="location.href='mypaper.html'" plain>返回</el-button>
                </div>

                <el-card>
                    <div slot="header">
                        填空题（每空{{paper.tk}}分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='填空题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
                <el-card>
                    <div slot="header">
                        单选题（每题{{paper.dk}}分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='单选题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
                <el-card>
                    <div slot="header">
                        多选题（每题{{paper.dxs}}分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='多选题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
                <el-card>
                    <div slot="header">
                        判断题（每题{{paper.pd}}分）
                    </div>
                    <ol>
                        <li v-for="d in paper.details" v-if="d.question.type=='判断题'">
                            <question :ref="'d'+d.id" :data="d.question"></question>
                        </li>
                    </ol>
                </el-card>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script>
    // 使用vue自定义组件实现考卷的显示与使用
    Vue.component("question",{
        props:["data"],
        template: `
          <div style="position: relative">
                <span v-if="data.eDetail" style="position: absolute; right: 0px; top: 0px">
                {{data.eDetail.tf ? "对" : "错"}}
                </span>
                <div v-if="data.type == '填空题'" v-html="rendTk(data.content)"></div>
                <div v-else-if="data.type == '单选题'" v-html="rendDx(data, 'radio')"></div>
                <div v-else-if="data.type == '多选题'" v-html="rendDx(data, 'checkBox')"></div>
                <div v-else-if="data.type == '判断题'" v-html="rendPd(data.content)" class="flex"></div>
          </div>
        `,
        methods:{
            rendTk(content){
                content = content.replaceAll(/_+/g, `<input class="fill" name="${this.data.id}">`);
                return content;
            },
            rendDx(data, type){
                let items = data.items.split(/;/);
                let itemStr = "";
                //除去$符号
                items.forEach(item=>{
                    if (item.startsWith("$")) {
                        item = item.substring(1);
                    }
                    itemStr += `<li><input type="${type}" name="${data.id}" value="${item}">${item}</li>`
                })

                let html = `${data.content}
                            <ol type="A">
                            ${itemStr}
                            </ol>`;
                return html;
            },
            rendPd(content){
                let html = `${content}
                            <div style="margin-right: 40px">
                                <input type="radio" name="${this.data.id}" value="true">对
                                <input type="radio" name="${this.data.id}" value="false">错
                            </div>`;
                return html;
            }
        }
    })
    var v = new Vue({
        el:"#app",
        data:{
            uid: '',
            paper: {},
            exam: null
        },
        watch: {
            uid(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.get();
                }
            }
        },
        created(){

        },
        methods:{
            //组件自定义方法
            user(info) {
                this.uid = info.id;
            },
            //获取信息
            get(){
                axios.get("cloud-other/paper/get" + location.search).then(res=>{
                    this.paper = res.data;
                });
            }
        }

    })
</script>
<style>
    html, body, #app {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    .el-container{
        width: 100%;
        height: 100%;
    }
    .el-header{
        width: 100%;
        padding: 0%;
    }

    /* 卡片 */
    .c1{
        width: 100%;
        height: 100%;
        font-size: 35px;
    }

    /* 弹出 */
    .d1{
        width: 200px;
        height: 400px;
        position: absolute;
        z-index: 100;
        left: 10%;
    }

    /* 浮动 */
    .f{
        float: left;
    }
    .r{
        float: right;
    }

    .i1{
        position: relative;
        top: -15px;
    }

    .p1{
        margin: 8px 10px 0 10px;
        text-decoration: none;
        color: #333333;
    }
    .user{
        float: right;
        position: relative;
        left: -40px;
        top: 15px;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    li>ol{
        margin-bottom: 20px;
    }
    li{
        margin-block: 10px;
        line-height: 2rem;
    }
    .fill{
        border: 0px;
        border-bottom: 1px #000 solid;
        margin-inline: 3px;
        padding: 5px;
        text-align: center;
        color: #0a6999;
    }
</style>

</html>